import React, { memo, useEffect, useRef, useState } from "react";
import SongWarrper from "./style";
import { RightOutlined,DoubleLeftOutlined,DoubleRightOutlined  } from '@ant-design/icons';

import { useNavigate } from "react-router-dom";
import SongSheetItem from "../song-sheet-item/index";

const index = memo((props) => {
  const body = useRef();
  const [page,changePage] = useState(0);
  const navigate = useNavigate()

  const btnLeft=()=>{
    if(page==0)return
    changePage(page-1);
  }
  const btnRight=()=>{
    if(body.current.scrollWidth
      <=
      (page*body?.current?.clientWidth+body.current.clientWidth))return
    changePage(page+1);
  }
  const {title = '推荐歌单',listData} = props
  return (
    <SongWarrper transX={-(page*body?.current?.clientWidth*0.8) || 0}>
      <div className="leftbtn"  onClick={btnLeft}><DoubleLeftOutlined /></div>
      <div className="rightbtn" onClick={btnRight}><DoubleRightOutlined /></div>
      <div className="main">
      <div className="header">
        <div className="title">
            <div className="title_main">{title}</div>
            <div className="title_detail">官方甄选订购歌单</div>
        </div>
        <div className="more">更多&nbsp;<RightOutlined /></div>
      </div>
        <ul className="body" ref={body}>
            {
              listData?.map((n,i)=>{
                return (
                  <SongSheetItem n={n} key={i} i={i}/>
                )
              })
            }
        </ul>
      </div>
        
    </SongWarrper>
  );
});

export default index;
